<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="nav.css">
    <script src="../day53/jquery-3.6.0.min.js"></script>
    <script src="nav.js"></script>
</head>
<body>
    <div class="wrapHeader"></div>
</body>
<script>
    // 载入公共头部的本质  => 通过ajax请求(对应的html结构) => 放到指定元素中

    // 问题?
    // ajax异步请求  => nav.js加载时(html结构还未生成) => js无效
    // 1. 生成之后在绑定 => 不是很合适(nav.js 已提取独立的js文件)
    //    升级: 等页面html生成完毕之后 动态的载入nav.js

    // 2. 利用事件委托绑定事件 (可以给未来生成的元素绑定事件)

    $.ajax({
        type:"get",
        url:"nav.html",
        dataType:"html",
        success:function(html){
            $(".wrapHeader").html(html);
        }
    })

    // $(".wrapHeader").load("nav.html");
</script>
</html>